<template>
  <div>
    <h1>销售账单数据</h1>
    <div id="loading" v-if="loading">正在加载数据...</div>
    <div id="error" class="error" v-if="error">{{ error }}</div>
    <table id="dataTable">
      <thead>
      <tr>
        <th>创建时间</th>
        <th>交货单号</th>
        <th>客户名称</th>
        <th>商品描述</th>
        <th>单价（元/吨）</th>
        <th>总金额（元）</th>
        <th>备注</th>
      </tr>
      </thead>
      <tbody id="tableBody">
      <tr v-for="(data, index) in tableData" :key="index">
        <td>{{ data.occurAge || 'N/A' }}</td>
        <td>{{ data.numbers }}</td>
        <td>{{ data.client }}</td>
        <td>{{ data.oneText }}</td>
        <td>¥{{ data.univalence?.toFixed(2) || '0.00' }}</td>
        <td>¥{{ data.sums?.toFixed(2) || '0.00' }}</td>
        <td>{{ data.note || '' }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
  data() {
    return {
      loading: true,
      error: null,
      tableData: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const API_URL = 'http://127.0.0.1:5001/api/user/get_data';
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }
        const data = await response.json();
        this.tableData = data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        this.error = `获取数据失败: ${error.message}`;
      }
    },
  },
};
</script>

<style scoped>
/* 新增增强样式 */
body {
  background: #f0f2f5;
  max-width: 100vw;
  margin: 2rem auto;
  padding: 0 20px;
}

/* ====== 新增边框增强样式 ====== */
table {
  border: 2px solid #e9ecef; /* 新增外边框 */
}

th {
  border-right: 2px solid rgba(255, 255, 255, 0.3) !important; /* 白色分隔线 */
  border-left: 2px solid rgba(0, 0, 0, 0.05); /* 左侧微阴影 */
}

td {
  border-right: 1px solid #e9ecef; /* 垂直分隔线 */
  position: relative; /* 为悬浮效果准备 */
}

/* 最后一列去除分隔线 */
th:last-child,
td:last-child {
  border-right: none;
}

/* 悬浮高亮分隔线 */
tr:hover td:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #5c7cfa;
  box-shadow: 0 0 8px rgba(92, 124, 250, 0.3);
}

/* ====== 视觉优化补充 ====== */
th {
  padding: 16px 20px; /* 增大表头间距 */
  font-size: 15px;
}

td {
  color: #495057; /* 加深字体颜色 */
  padding: 14px 20px; /* 增加单元格内间距 */
}

h1 {
  color: #2c3e50;
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

table {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background: linear-gradient(145deg, #5c7cfa, #4b6efb);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

td {
  transition: background-color 0.2s;
}

tr:hover td {
  background-color: #f8f9fa !important;
}

/* 金额数字特殊样式 */
td:nth-child(5),
td:nth-child(6) {
  font-family: 'Courier New', monospace;
  text-align: right;
  color: #ccb22e;
}

/* 加载动画 */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.2rem;
  color: #5c7cfa;
}

#loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid #ddd;
  border-top-color: #5c7cfa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 错误提示增强 */
.error {
  background: #ffe3e3;
  border-left: 4px solid #ff6b6b;
  padding: 15px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.error::before {
  content: "⚠️";
  font-size: 1.2em;
}

/* 响应式处理 */
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 10px;
  }

  td:nth-child(4),
  td:nth-child(7) {
    display: none;
  }

  td::after {
    display: none; /* 移动端隐藏悬浮分隔线 */
  }

  td {
    border-right: 1px solid #dee2e6; /* 加深移动端分隔线 */
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>